<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>步进电机控制面板</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Roboto', Arial, sans-serif; background: linear-gradient(120deg, #e0eafc, #cfdef3); margin: 0; min-height: 100vh; }
        .container { max-width: 440px; margin: 40px auto; background: #fff; border-radius: 18px; box-shadow: 0 4px 24px rgba(0,0,0,0.10); padding: 32px 24px 24px 24px; }
        h1 { text-align: center; font-weight: 700; color: #2d3a4b; margin-bottom: 18px; }
        .card { background: #f7fafd; border-radius: 12px; padding: 18px 16px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
        .row { display: flex; align-items: center; margin-bottom: 14px; }
        .row label { flex: 1; font-size: 1rem; color: #34495e; }
        .row input[type="number"] { width: 90px; padding: 6px 8px; border-radius: 6px; border: 1px solid #bfc9d1; font-size: 1rem; }
        .switch { position: relative; display: inline-block; width: 44px; height: 24px; }
        .switch input { display: none; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #bfc9d1; border-radius: 24px; transition: .3s; }
        .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; box-shadow: 0 1px 4px rgba(0,0,0,0.10); }
        input:checked + .slider { background: #4f8cff; }
        input:checked + .slider:before { transform: translateX(20px); }
        .mode-toggle { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .btn { background: #4f8cff; color: #fff; border: none; border-radius: 8px; padding: 10px 22px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background .2s; }
        .btn:active { background: #386fd6; }
        .settings { margin-top: 18px; }
        .settings label { font-size: 0.98rem; }
        .select { padding: 6px 8px; border-radius: 6px; border: 1px solid #bfc9d1; font-size: 1rem; background: #fff; }
        .status { text-align: center; font-size: 1.1rem; color: #4f8cff; margin-bottom: 10px; }
        .tab-bar { display: flex; justify-content: center; margin-bottom: 18px; }
        .tab-btn { background: none; border: none; font-size: 1.1rem; font-weight: 700; color: #bfc9d1; margin: 0 12px; cursor: pointer; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color .2s, border-bottom .2s; }
        .tab-btn.active { color: #4f8cff; border-bottom: 2px solid #4f8cff; }
        textarea { font-family: 'Roboto', Arial, sans-serif; border-radius: 8px; border: 1px solid #bfc9d1; padding: 8px; resize: vertical; }
    </style>
</head>
<body>
    <div class="container">
        <h1>步进电机控制</h1>
        <div class="tab-bar">
            <button class="tab-btn active" id="tab-control">控制</button>
            <button class="tab-btn" id="tab-settings">设置</button>
            <button class="tab-btn" id="tab-macro">宏</button>
        </div>
        <div id="panel-control">
            <div class="card">
                <div class="status" id="current-mode">当前模式：脉冲速度</div>
                <div class="mode-toggle">
                    <span>脉冲速度</span>
                    <label class="switch">
                        <input type="checkbox" id="mode-switch">
                        <span class="slider"></span>
                    </label>
                    <span>角速度</span>
                </div>
                <div class="row"><b>电机X</b></div>
                <div class="row">
                    <label for="speed-x" id="speed-label-x">速度 (Hz)</label>
                    <input type="number" id="speed-x" min="0" max="10000" value="1000">
                    <select id="direction-x" class="select">
                        <option value="1">正转</option>
                        <option value="-1">反转</option>
                    </select>
                </div>
                <div class="row">
                    <button class="btn" id="btn-start-x">启动X</button>
                    <button class="btn" id="btn-stop-x" style="background:#e74c3c;margin-left:10px;">停止X</button>
                </div>
                <div class="row"><b>电机Y</b></div>
                <div class="row">
                    <label for="speed-y" id="speed-label-y">速度 (Hz)</label>
                    <input type="number" id="speed-y" min="0" max="10000" value="1000">
                    <select id="direction-y" class="select">
                        <option value="1">正转</option>
                        <option value="-1">反转</option>
                    </select>
                </div>
                <div class="row">
                    <button class="btn" id="btn-start-y">启动Y</button>
                    <button class="btn" id="btn-stop-y" style="background:#e74c3c;margin-left:10px;">停止Y</button>
                </div>
            </div>
        </div>
        <div id="panel-settings" style="display:none;">
            <div class="card settings">
                <div class="row">
                    <label for="step-angle">步进角</label>
                    <select id="step-angle" class="select">
                        <option value="0.9">0.9°</option>
                        <option value="1.8" selected>1.8°</option>
                    </select>
                </div>
                <div class="row">
                    <label for="microstep">细分</label>
                    <select id="microstep" class="select">
                        <option value="1">1</option>
                        <option value="2">1/2</option>
                        <option value="4">1/4</option>
                        <option value="8">1/8</option>
                        <option value="16" selected>1/16</option>
                        <option value="32">1/32</option>
                        <option value="64">1/64</option>
                    </select>
                </div>
                <div class="row">
                    <label for="gear-ratio">齿比</label>
                    <input type="number" id="gear-ratio" min="1" max="100" value="1">
                </div>
                <button class="btn" id="btn-save-settings">保存设置</button>
            </div>
        </div>
        <div id="panel-macro" style="display:none;">
            <div class="card">
                <div class="row">
                    <label for="macro-text">宏编辑</label>
                </div>
                <div class="row">
                    <textarea id="macro-text" style="width:100%;height:120px;font-size:1rem;"></textarea>
                </div>
                <div class="row">
                    <button class="btn" id="btn-macro-save">保存宏</button>
                </div>
                <div class="row">
                    <button class="btn" id="btn-macro-start">开始执行宏</button>
                    <button class="btn" id="btn-macro-stop" style="background:#e74c3c;margin-left:10px;">停止宏</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        // Tab 切换
        const tabControl = document.getElementById('tab-control');
        const tabSettings = document.getElementById('tab-settings');
        const tabMacro = document.getElementById('tab-macro');
        const panelControl = document.getElementById('panel-control');
        const panelSettings = document.getElementById('panel-settings');
        const panelMacro = document.getElementById('panel-macro');
        tabControl.onclick = () => {
            tabControl.classList.add('active');
            tabSettings.classList.remove('active');
            tabMacro.classList.remove('active');
            panelControl.style.display = '';
            panelSettings.style.display = 'none';
            panelMacro.style.display = 'none';
        };
        tabSettings.onclick = () => {
            tabSettings.classList.add('active');
            tabControl.classList.remove('active');
            tabMacro.classList.remove('active');
            panelSettings.style.display = '';
            panelControl.style.display = 'none';
            panelMacro.style.display = 'none';
        };
        tabMacro.onclick = () => {
            tabMacro.classList.add('active');
            tabControl.classList.remove('active');
            tabSettings.classList.remove('active');
            panelMacro.style.display = '';
            panelControl.style.display = 'none';
            panelSettings.style.display = 'none';
        };

        // 模式切换
        const modeSwitch = document.getElementById('mode-switch');
        const currentMode = document.getElementById('current-mode');
        // X电机
        const speedInputX = document.getElementById('speed-x');
        const speedLabelX = document.getElementById('speed-label-x');
        const directionX = document.getElementById('direction-x');
        // Y电机
        const speedInputY = document.getElementById('speed-y');
        const speedLabelY = document.getElementById('speed-label-y');
        const directionY = document.getElementById('direction-y');
        // 公共参数
        const microstepSelect = document.getElementById('microstep');
        const stepAngleSelect = document.getElementById('step-angle');
        let mode = '脉冲速度';

        function pulseToAngleSpeed(pulseSpeed, stepAngle, microstep) {
            return (pulseSpeed * stepAngle) / microstep;
        }
        function angleToPulseSpeed(angleSpeed, stepAngle, microstep) {
            return (angleSpeed * microstep) / stepAngle;
        }

        modeSwitch.onchange = function() {
            const stepAngle = parseFloat(stepAngleSelect.value);
            const microstep = parseInt(microstepSelect.value);
            if (this.checked) {
                mode = '角速度';
                // 换算为角速度
                speedInputX.value = Math.round(pulseToAngleSpeed(Number(speedInputX.value), stepAngle, microstep) * 1000) / 1000;
                speedInputY.value = Math.round(pulseToAngleSpeed(Number(speedInputY.value), stepAngle, microstep) * 1000) / 1000;
                speedLabelX.textContent = '速度 (°/s)';
                speedLabelY.textContent = '速度 (°/s)';
            } else {
                mode = '脉冲速度';
                // 换算为脉冲速度
                speedInputX.value = Math.round(angleToPulseSpeed(Number(speedInputX.value), stepAngle, microstep));
                speedInputY.value = Math.round(angleToPulseSpeed(Number(speedInputY.value), stepAngle, microstep));
                speedLabelX.textContent = '速度 (Hz)';
                speedLabelY.textContent = '速度 (Hz)';
            }
            currentMode.textContent = '当前模式：' + mode;
        };

        function updateSpeedOnParamChange() {
            const stepAngle = parseFloat(stepAngleSelect.value);
            const microstep = parseInt(microstepSelect.value);
            if (mode === '角速度') {
                speedInputX.value = Math.round(pulseToAngleSpeed(Number(speedInputX.value), stepAngle, microstep) * 1000) / 1000;
                speedInputY.value = Math.round(pulseToAngleSpeed(Number(speedInputY.value), stepAngle, microstep) * 1000) / 1000;
            } else {
                speedInputX.value = Math.round(angleToPulseSpeed(Number(speedInputX.value), stepAngle, microstep));
                speedInputY.value = Math.round(angleToPulseSpeed(Number(speedInputY.value), stepAngle, microstep));
            }
        }
        stepAngleSelect.onchange = updateSpeedOnParamChange;
        microstepSelect.onchange = updateSpeedOnParamChange;

        // 启动/停止按钮
        document.getElementById('btn-start-x').onclick = function() {
            const stepAngle = parseFloat(stepAngleSelect.value);
            const microstep = parseInt(microstepSelect.value);
            let pulseSpeed;
            if (mode === '角速度') {
                const angleSpeed = Number(speedInputX.value);
                pulseSpeed = Math.round(angleToPulseSpeed(angleSpeed, stepAngle, microstep));
            } else {
                pulseSpeed = Number(speedInputX.value);
            }
            const direction = directionX.value;
            alert(`X启动：\n模式：${mode}\n脉冲速度：${pulseSpeed} Hz\n方向：${direction == 1 ? '正转' : '反转'}`);
            // TODO: 发送 pulseSpeed 和 direction 到后端
        };
        document.getElementById('btn-stop-x').onclick = function() {
            alert('X已停止');
            // TODO: 发送停止命令到后端
        };
        document.getElementById('btn-start-y').onclick = function() {
            const stepAngle = parseFloat(stepAngleSelect.value);
            const microstep = parseInt(microstepSelect.value);
            let pulseSpeed;
            if (mode === '角速度') {
                const angleSpeed = Number(speedInputY.value);
                pulseSpeed = Math.round(angleToPulseSpeed(angleSpeed, stepAngle, microstep));
            } else {
                pulseSpeed = Number(speedInputY.value);
            }
            const direction = directionY.value;
            alert(`Y启动：\n模式：${mode}\n脉冲速度：${pulseSpeed} Hz\n方向：${direction == 1 ? '正转' : '反转'}`);
            // TODO: 发送 pulseSpeed 和 direction 到后端
        };
        document.getElementById('btn-stop-y').onclick = function() {
            alert('Y已停止');
            // TODO: 发送停止命令到后端
        };

        // 宏相关
        document.getElementById('btn-macro-save').onclick = function() {
            const macroText = document.getElementById('macro-text').value;
            alert('宏已保存:\n' + macroText);
            // TODO: 保存宏到后端
        };
        document.getElementById('btn-macro-start').onclick = function() {
            alert('开始执行宏');
            // TODO: 启动宏执行
        };
        document.getElementById('btn-macro-stop').onclick = function() {
            alert('停止宏执行');
            // TODO: 停止宏执行
        };
        document.getElementById('btn-save-settings').onclick = function() {
            const stepAngle = document.getElementById('step-angle').value;
            const microstep = document.getElementById('microstep').value;
            const gearRatio = document.getElementById('gear-ratio').value;
            alert(`设置已保存：\n步进角：${stepAngle}°\n细分：${microstep}\n齿比：${gearRatio}`);
            // TODO: 保存设置到后端
        };
    </script>
</body>
</html>